<template>
    <span class="flower">嗨购后台管理系统</span>
    <div class="back" @keyup.enter="verifys">
        <div class="login-container">
            <h2>管理员登录</h2>
                <div class="form-group">
                    <label for="username">账户名：</label>
                    <input type="text" id="username" v-model="gather.adminname" placeholder="请输入用户名" name="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" v-model="gather.password" placeholder="请输入密码" id="password" name="password" required>
                </div>
                <button type="submit" @click="verifys">登录</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import service  from '../../until/service';
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css';
import {useRouter} from "vue-router";

const $router = useRouter();
const zhe = /[0-9A-Za-z]{6,15}/g
interface reh{
    adminname:string,
    password:string
} 
    const gather = reactive<reh>({
        adminname:'',
        password:''
    })
    const verifys = ()=>{
        if(gather.adminname == ''){
            ElMessage({
                message:"请输入账户名",
                type:"error"
            })
        }else if(gather.password == ''){
            ElMessage({
                message:"请输入密码",
                type:"error"
            })
        }else if(gather.adminname.length >6){
            ElMessage({
                message:"用户名长度不得超过六位",
                type:"error"
            })
        }else if(!zhe.test(gather.password)){
            ElMessage({
                message:"密码格式错误",
                type:"error"
            })
        }else {
            service({
            url:'/admin/login',
            method:'post',
            data:{
                adminname:gather.adminname,
                password:gather.password
            }
        }).then(res=>{
            if(res.data.code === '200'){
                sessionStorage.setItem("token",res.data.data.token)
                sessionStorage.setItem("adminname",gather.adminname)
                sessionStorage.setItem("grants",JSON.stringify(res.data.data.checkedkeys));
                console.log(res.data.data.token)
                ElMessage({
                message:"登录成功",
                type:"success"
            })
            $router.push('/admin')
            }else if(res.data.code === '10003'){
                ElMessage({
                message:"密码错误",
                type:"error"
            })
            }else if(res.data.code === '10005'){
                ElMessage({
                message:"账户未注册",
                type:"error"
            })
            }
        })
        }

    }
</script>

<style scoped>
html,
body {
    height: 100%;
}

.back {
    height: 100%;
    width: 100%;
    background: url('https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/c995d143ad4bd113d3b5cb035eafa40f4bfb0582.jpg') no-repeat 100% 100%;
}

.flower {
    font-family: 'Pacifico', cursive;
    color: #195cd8;
    text-shadow: 2px 2px 0 #3c63c7, 4px 4px 0 #12308c, 6px 6px 0 #287ea9;
    font-size: 4em;
    background-image: radial-gradient(circle at 50% 50%, #4088d5, #1c6b8a);
    background-clip: text;
    -webkit-background-clip: text;
    position: absolute;
    letter-spacing: 20px;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.7;
}

.login-container {
    background-color: #dbe5e7;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 320px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h2 {
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
    width: 94%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button[type="submit"] {
    background-color: #1f69be;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: #2f435b;
}</style>